<!---->
<template>
  <div>
    <div style="margin: auto;">
      <el-tabs  type="border-card">
        <el-tab-pane  label="查看线路"  >
          <el-table
              :data="line.slice((currentPage-1)*PageSize,currentPage*PageSize)"
              border
              style="width: 100%;margin-bottom: 10px  ">
            <el-table-column
                type="index"
                label="序号"
                fixed
                width="150">
            </el-table-column>
            <el-table-column
                fixed prop="lineName" label="名称" width="150">
            </el-table-column>
            <el-table-column
                fixed prop="days" label="天数" width="150">
            </el-table-column>
            <el-table-column
                fixed prop="price" label="价格" width="150">
            </el-table-column>
            <el-table-column
                fixed prop="vehicle" label="工具" width="150">
            </el-table-column>
            <el-table-column
                fixed prop="typeName" label="类型" width="150">
            </el-table-column>
            <el-table-column label="操作" width="150" fixed>
              <template #default="scope">
                <el-button @click="PutLine(scope.row)" type="text" size="small">修改</el-button>
              </template>
            </el-table-column>

          </el-table>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
              :total="line.length" s>
          </el-pagination>
        </el-tab-pane>

        <el-tab-pane label="添加线路">
          <el-form  class="demo-ruleForm" label-width="100px" inline>
            <div style="text-align: left">
              <el-form-item label="线路名称" prop="lineName">
                <el-input v-model="addline.lineName" class="addline-input"></el-input>
              </el-form-item>
            </div>
            <div style="text-align: left">
              <el-form-item label="出游天数" prop="days" >
                <el-input v-model="addline.days" class="addline-input"></el-input>
              </el-form-item>
              <el-form-item label="线路价格" prop="price">
                <el-input v-model="addline.price" class="addline-input"></el-input>
              </el-form-item>
            </div>
            <div style="text-align: left ">
              <el-form-item label="出游工具" prop="vehicle">
                <el-select v-model="addline.vehicle" placeholder="请选择" class="addline-input">
                  <el-option v-for="(item,index) in options" :key="index"
                             :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="线路类型" prop="lineTypeID">
                <el-select v-model="addline.typeName" placeholder="请选择" class="addline-input">
                  <el-option
                      v-for="(item,index) in type"
                      :key="index"
                      :label="item.name"
                      :value="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div style="text-align: left ">
              <el-form-item label="推荐理由" prop="arrange">
                <el-input type="textarea" v-model="addline.reason" ></el-input>
              </el-form-item>
              <el-form-item label="行程安排" prop="arrange">
                <el-input type="textarea" v-model="addline.arrange" ></el-input>
              </el-form-item>
              <el-form-item label="线路简介" prop="introduction">
                <el-input type="textarea" v-model="addline.introduction" ></el-input>
              </el-form-item>
            </div>

          </el-form>


          <el-button type="primary" @click="postLine" style="position: absolute;top: 10px;right: 20px">添加线路</el-button>
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>
export default {
  name: "adminLine",
  data(){
    return{
      line:[],
      addline:{},
      lineType:[],
      // 默认显示第几页
      currentPage:1,
      // 默认每页显示的条数
      PageSize:10,
      options: [
          {label: '飞机'}, {label: '游轮'}, {label: '大巴'},
        {label: '汽车'}, {label: '高铁'}],
      type:[{name:'境内游'},{name:'境外游'},{name:'海岛游'}],
      cenck:{},
      imgUrl:'',
    }
  },
  created() {
    this.getLine()

  },

  methods:{
      getLine:function(){
        this.$axios.get("/api/admin/line").then(res => {
          console.log(res.data)
          this.line=res.data
        })
      },
      checkType(file){
        this.cenck.introduction = file.raw
        console.log(this.cenck)

      },
      //添加线路
      postLine:function (){
        // this.$refs.upload.submit();
        // console.log()
       this.addline.teamBuy=0;
       this.$axios.post("/api/admin/line", this.d).then(res => {
           this.$message.warning(res.data.msg);
       })
      },

    //跳转到线路vue
    PutLine:function (row){
      this.$router.push({ path: '/adminPutLine', query: { user: row}});
    },

      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      // 分页
      // 每页显示的条数
      handleSizeChange(val) {
        // 改变每页显示的条数
        this.PageSize = val
        // 在改变每页显示的条数时，要将页码显示到第一页
        this.currentPage = 1
      },
      // 显示第几页
      handleCurrentChange(val) {
        // 改变默认的页数
        this.currentPage = val
      },
  },

}

</script>

<style>
.el-input__inner{
  /*width: 290px;*/

  padding: 0 5px;
}
.el-textarea{
  width: 290px;
}
.upload-demo{
  display: inline-block;
  position: relative;
  height: 150px;
  text-align: left;
}
.el-upload-list--picture .el-upload-list__item{
  /*position: absolute;*/
  /*top: 0px;*/
  float: left;
  margin:0 30px;
  width: 340px;
}
.el-button--small{
  margin:0 25px;
}
.el-table .el-table__fixed{
  height: 100% !important;
}
.el-table th.is-leaf{
  background-color: azure;

}
</style>
<style scoped>
.addline-input{
  /*display: inline-block;*/
  width: 290px;
  height: 30px;

  line-height: 30px;
  /*height: 30px;*/
  /*line-height: 30px;*/
  /*padding: 0 5px;*/
}


</style>